<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task_5</title>
	<link rel="stylesheet" href="task_5.css">
</head>
<body>
<div id="head">
	<ul>
		<li>导航链接四</li>
		<li>导航链接三</li>
		<li>导航链接二</li>
		<li>导航链接一</li>
	</ul>
	<img src="icon.png" alt="">
</div>
<div id="content">
	<div id="right">
		<h2>侧栏标题</h2>
		<form>
		<table>
			<tr>
				<td align="right">请输入邮箱地址</td>
				<td><input type="text" name="email" /></td>
			</tr>
			<tr>
				<td> </td>
				<td class="notice">邮箱地址请按要求格式输入</td>
			</tr>
			<tr>
				<td align="right">请输入密码</td>
				<td><input type="password" name="password" /></td>
			</tr>
			<tr>
				<td align="right">请重复输入密码</td>
				<td><input type="password" name="password" /></td>
			</tr>
			<tr>
				<td> </td>
				<td class="notice">密码请为6-16位英文数字</td>
			</tr>
			<tr>
				<td align="right">性别</td>
				<td><input type="radio" name="gender" value="male" checked="checked">男<input type="radio" name="gender" value="female">女<br></td>
			</tr>
			<tr>
				<td align="right">城市</td>
				<td><select name="city">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
				<option value="深圳">深圳</option>
				</select></td>
			</tr>
			<tr>
				<td align="right">爱好</td>
				<td><input type="checkbox" name="运动">运动
				<input type="checkbox" name="艺术">艺术
				<input type="checkbox" name="科学">科学</td>
			</tr>
			<tr>
				<td align="right" class="discribe">个人描述</td>
				<td><textarea rows="6" cols="20">这是一个多行输入框，输入您的个人描述</textarea></td>
			</tr>
		</table>
		<input type="submit" value="确认提交" id="sub" />
		</form>
	</div>
	<div id="main">
		<div>
			<h2>一级标题</h2>
			<h3>二级标题</h3>
			<h5>作者与日期</h5>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接连接到百度前端技术学院</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
			<img src="task_5.png" alt="文章图片" class="art_img">
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接连接到百度前端技术学院</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
		</div>
		<div>
			<h2>一级标题</h2>
			<h3>二级标题</h3>
			<h5>作者与日期</h5>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com/">这里有一个链接连接到百度前端技术学院</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
			<img src="task_5.png" alt="文章图片" class="art_img">
			<ul>
				<li>列表项目一</li>
				<li>列表项目二</li>
				<li>列表项目三</li>
			</ul>
		</div>
		<div>
			<h2>图片</h2>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
			<div class="exhibit"><h5>图片名称</h5><img src="task_5.png" alt="图片"></div>
		</div>
		<div>
			<h2>一级标题</h2>
			<h3>二级标题</h3>
			<h5>作者与日期</h5>
			<ol>
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
			</ol>
			<p>下面是一个表格一个表格一个表格一个表格一个表格</p>
			<table>
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr id="gray">
					<td>总计</td>
					<td>1000</td>
					<td></td>
				</tr>
				</tr>
			</table>
		</div>
	</div>
</div>
<div id="bottom">
	<p>copyright@</p>
</div>
</body>
</html>







